<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>双大括号表达式</h3>
			<p>{{msg}}</p>
			<p>{{msg.toUpperCase()}}</p>
			<p v-text="ahref"></p>
			<p v-html="ahref"></p>
			<h3>强制数据绑定</h3>
			<!--把html格式的数据解析为json格式数据-->
			<img v-bind:src="imageUrl" />
			<!--省略写法-->
			<img :src="imageUrl" />
			<h3>绑定时间监听</h3>
			<button v-on:click="testClick('afdasdf')">淘宝</button>
			<button @click="testClick">淘宝</button>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				msg:"hello world!",
				ahref:"<a href='http://www.baidu.com/'>百度</a>",
				imageUrl:"http://i1.hdslb.com/bfs/face/ed0a8bc1eeaf1fb0a6a36fb0c8528bd23423d2ec.jpg",
				
			},
			methods:{
				testClick(value){
					if(typeof value === 'string'){
						alert("被点击了！"+value)
					}else{
						alert("没有入参，被点击了!")
					}
					
				}
			}
		})
	</script>
</html>
